﻿@page "/console"
@inject Bit.Butil.Console console

<PageTitle>Console Samples</PageTitle>

<h1>Console</h1>

<pre style="font-family:Consolas; overflow: auto;">
@@inject Bit.Butil.Console console

@@code {
    ...
    console.Log("This is a test log");
    ...
}
</pre>

<br />
<hr />

<h3>Open the DevTools' console and start clicking on buttons</h3>

<hr />
<br />

<span>Value:</span>
<input @bind-value="value" @ref="inputRef" />

<br />
<br />
<hr />
<br />

<button @onclick="@(() => console.Debug(value))">Debug</button>

<br />
<br />
<hr />
<br />

<button @onclick="@(() => console.Dir(inputRef))">Dir</button>

<br />
<br />
<hr />
<br />

<button @onclick="@(() => console.Dirxml(inputRef))">Dirxml</button>

<br />
<br />
<hr />
<br />

<button @onclick="@(() => console.Assert(false, "This is a test assert:", value))">Assert</button>

<br />
<br />
<hr />
<br />

<button @onclick="@(() => console.Count(value))">Count</button>
&nbsp;
<button @onclick="@(() => console.CountReset(value))">CountReset</button>

<br />
<br />
<hr />
<br />

<button @onclick="@(() => console.Error("This is a test error:", value))">Error</button>
<br />
<br />
<button @onclick="@(() => console.Info("This is a test info:", value))">Info</button>
<br />
<br />
<button @onclick="@(() => console.Log("This is a test log:", value))">Log</button>
<br />
<br />
<button @onclick="@(() => console.Warn("This is a test warn:", value))">Warn</button>
<br />
<br />
<button @onclick="@(() => console.Table(new { Name = "Value", Value = value }))">Table</button>

<br />
<br />
<hr />
<br />

<button @onclick="CreateGroupLogs">Create group logs</button>

<br />
<br />
<hr />
<br />

<button @onclick="@(() => console.Profile(value))">Profile</button>
&nbsp;
<button @onclick="@(() => console.ProfileEnd(value))">ProfileEnd</button>

<br />
<br />
<hr />
<br />

<button @onclick="@(() => console.Time(value))">Time</button>
&nbsp;
<button @onclick="@(() => console.TimeLog(value))">TimeLog</button>
&nbsp;
<button @onclick="@(() => console.TimeEnd(value))">TimeEnd</button>
&nbsp;
<button @onclick="@(() => console.TimeStamp(value))">TimeStamp</button>

<br />
<br />
<hr />
<br />

<button @onclick="@(() => console.Trace(value))">ConsoleTrace</button>

<br />
<br />
<hr />
<br />

<button @onclick="@(() => console.Clear())">Clear</button>

<br />
<br />

@code {
    private string value = "Test";

    private ElementReference inputRef;

    private async Task CreateGroupLogs()
    {
        await console.Log("This is the outer level");
        await console.Group();
        await console.Log("Level 2");
        await console.Group();
        await console.Log("Level 3");
        await console.Warn("More of level 3");
        await console.GroupCollapsed();
        await console.Log("Back to level 2");
        await console.GroupEnd();
        await console.Log("Back to the outer level");
    }
}